'use client';

import React from 'react';
import Title from '../Title';
import Box from './Box';
import a from './a.svg';
import b from './b.svg';
import c from './c.svg';
import d from './d.svg';
import e from './e.svg';
import overseaWarehouse from './oversea-warehouse.png';
import { Space } from 'antd';
import { useStatisticsData } from '../../hooks/useStatisticsData';
import styles from '../../pages.module.scss';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 
const ResourceLink: React.FC = () => {
	const { data } = useStatisticsData();

	return (
		<Space
			style={{
				padding: px2vw(24) + ' ' + px2vw(14) + ' ' + px2vw(24) + ' ' + px2vw(24),
				borderRadius: 16
			}}
			className={styles.spaceWrap}
			direction="vertical"
			size={14}
		>
			<Title title="资源链接" subTitle="累计数据" />
			{/* <Box
				icon={a.src}
				label="涉及航线"
				value={Number(data?.oceanYearLineCount || 0)}
				unit="条"
			/> */}

			<Box
				icon={c.src}
				label="目的国家"
				value={Number(data?.oceanYearCountryCount || 0)}
				unit="个"
			/>
			<Box
				icon={b.src}
				label="目的港"
				value={Number(data?.oceanYearDischargePortCount || 0)}
				unit="个"
			/>
			{/* <Box
				icon={d.src}
				label="出运航司数"
				value={Number(data?.oceanYearCarrierCount || 0)}
				unit="家"
			/> */}
			<Box
				labelStyle={{
					fontSize: px2vw(18)
				}}
				icon={e.src}
				label="国内仓储面积"
				value={Number(data?.storageArea || 0)}
				unit="平方"
			/>
			<Box
				labelStyle={{
					fontSize: px2vw(18)
				}}
				icon={overseaWarehouse.src}
				label="海外仓储面积"
				// value={Number(data?.overseasStorageArea || 0)}
				value={Number('313196' || 0)}
				unit="平方"
			/>
		</Space>
	);
};

export default ResourceLink;

